<template>
  <a-modal
    title="视图设置"
    :visible="visible"
    centered
    @cancel="closeSetting"
  >
    <a-radio-group v-model:value="currentType" button-style="solid" :style="{marginBottom: '20px'}">
      <a-radio-button v-for="(item, index) of types" :value="item.key">{{item.name}}</a-radio-button>
    </a-radio-group>
    <a-form layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="应收默认统计区间"
          >
            <a-select
              :options="INIT_OPTIONS.receivable"
              v-model:value="formData[currentType].chart_init.chart_1"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="应支默认统计区间"
          >
            <a-select
              :options="INIT_OPTIONS.payable"
              v-model:value="formData[currentType].chart_init.chart_2"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="currentType == 'finance'">
          <a-form-item
            label="到期租客默认统计区间"
          >
            <a-select
              :options="INIT_OPTIONS.expireOwner"
              v-model:value="formData[currentType].chart_init.chart_3"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="currentType == 'finance'">
          <a-form-item
            label="到期房东默认统计区间"
          >
            <a-select
              :options="INIT_OPTIONS.expireLandlord"
              v-model:value="formData[currentType].chart_init.chart_4"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
          >
            <template #label>
              成员是否可自定义区间
              <TextTip
                tips="当选项为”是“时，员工可以自定义选择想查看的统计区间，并且当员工选择后后续该员工的该视图都会统计所选择的区间。"
              />
            </template>
            <a-radio-group v-model:value="formData[currentType].is_member" name="radioGroup">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="formData[currentType].is_member">
          <a-form-item
            label="适用范围"
          >
            <a-radio-group v-model:value="formData[currentType].is_range" name="radioGroup">
              <a-radio :value="1">全部成员</a-radio>
              <a-radio :value="2">未选择过区间的成员</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="closeSetting"> 取消 </a-button>
      <a-button type="primary" @click="handleSubmit" :loading="submitLoading">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
  inject,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {Form, message} from "ant-design-vue";
const useForm = Form.useForm;
import { TextTip } from "bl-common-vue3";
import {RECEIVABLE, PAYABLE, EXPIRE_OWNER, EXPIRE_LANDLORD} from "@/views/home/constant";
import request from "@/common/utils/request";
import store from "@/store";

export default defineComponent({
  name: "WorkbenchSetting",
  components: { TextTip },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    currentKey: {
      type: String,
      default: "",
    },

  },
  setup(props, { emit }) {
    const state = reactive({
      currentType: 'boss',
      types: [
        {
          key: 'boss',
          name: "老板视图",
        },
        {
          key: 'finance',
          name: "财务视图",
        }
      ],
      rulesData: {},
      submitLoading: false,
    });

    const formData = reactive( {
      // 第一层是模块层
      boss: {
        chart_init: {
          chart_1: 2, // 回显时 chart_type === 4
          chart_2: 2, // 回显时 chart_type === 5
        },
        is_member: 0, // 0否 1是
        is_range: 1,
      },
      finance: {
        chart_init: {
          chart_1: 2, // 回显时 chart_type === 6
          chart_2: 2, // 回显时 chart_type === 7
          chart_3: 1, // 回显时 chart_type === 8
          chart_4: 2, // 回显时 chart_type === 9
        },
        is_member: 0, // 0否 1是
        is_range: 1,
      }
    });

    const { resetFields, validate, validateInfos } = useForm(
      formData,
      state.rulesData
    );

    const init = () => {
      state.currentType = props.currentKey;
      // 获取模块详情
      state.submitLoading = true;
      for (let key in formData) {
        request
          .get("/org", "/chart/getViewSet", {
            role: key === 'boss' ? 1 : 2,
          })
          .then((res) => {
            if (key === 'boss') {
              formData[key].chart_init.chart_1 = res?.chart_config?.chart_init?.chart_1 || 2;
              formData[key].chart_init.chart_2 = res?.chart_config?.chart_init?.chart_2 || 2;
            }
            if (key === 'finance') {
              formData[key].chart_init.chart_1 = res?.chart_config?.chart_init?.chart_1 || 2;
              formData[key].chart_init.chart_2 = res?.chart_config?.chart_init?.chart_2 || 2;
              formData[key].chart_init.chart_3 = res?.chart_config?.chart_init?.chart_3 || 1;
              formData[key].chart_init.chart_4 = res?.chart_config?.chart_init?.chart_4 || 2;
              state.submitLoading = false;
            }
            formData[key].is_member = res?.chart_config?.is_member || 0;
            formData[key].is_range = res?.chart_config?.is_range || 1;
          })
          .catch((err) => {
          });
      }
    };

    const reset = () => {
      resetFields();
      state.submitLoading = false;
    };

    // 保存设置--需同时保存老板和财务
    const handleSubmit = () => {
      state.submitLoading = true;
      for (let key in formData) {
        request
          .post("/org", "/chart/viewSet", {
            role: key === 'boss' ? 1 : 2,
            ...formData[key]
          })
          .then((res) => {
            if (key === 'finance') {
              // 保存成功
              message.success(res.msg || "保存成功！");
              emit('saveSuccess');
            }
          })
          .catch((err) => {

          });
      }
    };


    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );

    const closeSetting = () => {
      emit("closeSetting");
    };

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      INIT_OPTIONS,
      closeSetting,
      handleSubmit,
    };
  },
});
const INIT_OPTIONS = {
  // 应收
  receivable: RECEIVABLE,
  // 应支
  payable: PAYABLE,
  // 到期租客
  expireOwner: EXPIRE_OWNER,
  // 到期房东
  expireLandlord: EXPIRE_LANDLORD,
}
</script>



<style lang="less" scoped>
:deep(.ant-form-item) {
  margin-bottom: 16px;
}
</style>
